<template>
  <div>
      <el-upload
        class="upload-demo"
        :action="action"
        :headers="headers"
        :on-success="handleSuccess"
        :on-progress="handleProgress"
        :before-upload="beforeUpload"
        :limit="1"
        :show-file-list="false"
        >
        <!-- :auto-upload="false" -->
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->

        <span slot="tip" class="el-upload__tip" style="margin-left: 10px;">只能上传视频文件</span>
        <i slot="tip" @click="video_url=''" v-if="video_url" class="el-icon-delete" style="margin-left: 10px;cursor: pointer;"></i>
      </el-upload>
      <el-progress :percentage="progressPercentage" v-if="showProgress"></el-progress>
      <video controls v-if="video_url" :src="$baseUrl+'/storage/'+video_url" style="width: 300px;height: 150px;margin-top: 30px;"></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // 上传的文件列表
      progressPercentage: 0, // 上传进度百分比
      showProgress: false ,// 控制进度条的显示与隐藏
      action:"",
      headers:{
          Authorization:""
      },
      video_url:''
    };
  },
  watch: {
      video_url(newVal, oldVal) {
          this.$emit('getUrl',newVal)
      }

  },
  props:{
  	src:{
  		type:String,
  		default:''
  	}
  },
  mounted() {
      this.action = this.$domain + '/uplodeFile/uplodeImageLocalH5'
      this.headers.Authorization = sessionStorage.getItem('token')
      setTimeout(()=>{
        this.video_url = this.src
      },500)
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response)
      if(response.code==200){
          this.video_url =response.data.img_url
          this.$message.success('上传成功');
          this.showProgress = false; // 上传成功后隐藏进度条
      }
    },
    handleProgress(event, file, fileList) {
      this.showProgress = true; // 显示进度条
      this.progressPercentage = parseInt(event.percent); // 更新进度百分比
    },
    beforeUpload(file) {
      const isVideo = file.type === 'video/mp4' || file.type === 'video/x-m4v' || file.type === 'video/quicktime'; // 根据需要修改视频类型判断逻辑
      const isLt20M = file.size / 1024 / 1024 < 20; // 文件大小限制20MB
      if (!isVideo) {
        this.$message.error('上传视频只能是 MP4 格式!');
        return false;
      }
      if (!isLt20M) {
        this.$message.error('上传视频大小不能超过 20MB!');
        return false;
      }
      return true; // 返回true表示可以上传，返回false则不进行上传操作。
    },
    submitUpload() {
      this.$refs.upload.submit(); // 手动触发上传，这里需要确保ref为upload的元素存在。通常在el-upload标签上添加ref属性。例如：ref="upload"
    }
  }
};
</script>
